<template>
  <div>
      <!-- 页面导航 -->
      <el-menu
        :default-active="activeIndex2"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#fff"
        text-color="#333"
        active-text-color="#ffd04b"
      >   
      <el-menu-item index="1">乐章</el-menu-item>
      <el-menu-item index="2">音乐说</el-menu-item>
      <el-menu-item index="3">聊聊</el-menu-item>
      <el-menu-item index="4">乐趣</el-menu-item>
      <el-menu-item index="5">游记</el-menu-item>
      <el-menu-item index="6">摄影</el-menu-item>
      <el-menu-item index="7" @click="com">站务交流</el-menu-item>
      </el-menu>

    <div class="sq-leftnav">
        <div class="ts-leftnav-cont">
            <a href="#" class="ts-leftnav-tab1">有声读物</a>
            <a href="#" class="ts-leftnav-tab2">评论最多</a>
            <a href="#" class="ts-leftnav-tab3">收藏排名</a>
            <a href="#" class="ts-leftnav-tab4">点赞排名</a>
            <a href="#" class="ts-leftnav-tab5">人气排行</a>
            <a href="#" class="ts-leftnav-tab6">热门推荐</a>
        </div>
    </div>
      <!-- 主页面 -->
      <div v-if="flag">
          <Container/>
      </div>
      
      <!-- 站务交流页面 -->
      <div v-else>
        <Chating/>
      </div>

      <Pagination/>
      <!-- 内容区end -->
    <div class="footer">
        <div class="blink-con">
            <div class="btn-l">
                <span>友情链接</span>
                <p class="link-cont">
                    <a href="#">乐乎</a>
                    <a href="#">数字尾巴</a>
                    <a href="#">豆瓣</a>
                    <a href="#">环球旅行</a>
                    <a href="#">乐乎</a>
                    <a href="#">数字尾巴</a>
                    <a href="#">豆瓣</a>
                    <a href="#">乐乎</a>
                    <a href="#">数字尾巴</a>
                    <a href="#">豆瓣</a>
                    <a href="#">环球旅行</a>
                    <a href="#">乐乎</a>
                    <a href="#">数字尾巴</a>
                    <a href="#">豆瓣</a>
                    <a href="#">环球旅行</a>
                    <a href="#">乐乎</a>
                    <a href="#">数字尾巴</a>
                    <a href="#">豆瓣</a>
                    <a href="#">乐乎</a>
                    <a href="#">数字尾巴</a>
                    <a href="#">豆瓣</a>
                    <a href="#">环球旅行</a>
                    <a href="#">乐乎</a>
                    <a href="#">数字尾巴</a>
                    <a href="#">豆瓣</a>
                    <a href="#">环球旅行</a>
                    <a href="#">乐乎</a>
                    <a href="#">数字尾巴</a>
                    <a href="#">豆瓣</a>
                    <a href="#">乐乎</a>
                    <a href="#">数字尾巴</a>
                    <a href="#">豆瓣</a>
                    <a href="#">环球旅行</a>
                </p>
            </div>
            <div class="btn-r">
                <div class="weibo">
                    <img src="./footer-ewm1.jpg" alt="twitter">
                    <span>微博二维码</span>
                </div>
                <div class="weixin">
                    <img src="./footer-ewm2.jpg" alt="weichat">
                    <span>微信二维码</span>
                </div>
                <div class="connect">
                    <p>电话:51336808</p>
                    <p><i>邮编:100062</i>&nbsp;&nbsp;<i>传真:51337666</i></p>
                    <p>邮箱:info@newworldtours.cn</p>
                    <p>地址:北京市东城区广渠门内大街安化北里1号长保大厦13层</p>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="bot-con">
            <span><a href="#">关于我们</a></span>
            <span><a href="#">联系我们</a></span>
            <span><a href="/our">加入我们</a></span>
            <span><a href="#">团队成员</a></span>
            <span><a href="#">商务合作</a></span>
            <p class="bot-foot">
                <em>蓝莓派版权所有</em><em>京ICP备12346335号</em>  
            </p>
        </div>
    </div>
  </div>

  
</template>

<script>
import '../../js/phone'
import Pagination from '../../components/Pagination.vue'
import Chating from './chating.vue'
import Container from './container.vue'
import api from '@/api/index.js';
export default {
    components:{
        Chating
    },
  data(){
    return{
        flag:true
    }
  },
  components: { Pagination, Chating,
        Container },
  mounted(){
    //   api.getCommunity({})
    //   .then(res =>{
    //      console.log(res.data)
    //   })
  },
  methods:{
      handleSelect(){},
      activeIndex2(){},
      com(){
          this.flag=false
          console.log(111);
      }
  }
  }
</script>

<style scoped lang="less">
.el-menu-demo{
  margin: 0 auto;
}
.total{
   padding-left:125px;
   display: flex;
   box-shadow:0px 5px #F2F2F2 ;
}
.el-pagination{
  float:left;
  display: flex;
}
.item{
    width:150px;
    height:60px;
    line-height:60px;
}
/*左侧绿色的导航栏样式*/
.sq-leftnav{
    position: fixed;
    left: 0;
    top:260px;
    height: 200px;
    background-color: #109d59;
    z-index: 999;
}
.sq-leftnav .ts-leftnav-cont{
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 14px;
}
.sq-leftnav .ts-leftnav-cont a{
    display: block;
    color: #fff;
    margin:15px 6px;
    height: 15px;
    line-height: 15px;
   
    text-align: left;
    text-indent: 22px;
    padding-right: 3px;
}
.sq-leftnav .ts-leftnav-tab1{
    background-position: 3px -57px;
}
.sq-leftnav .ts-leftnav-cont .ts-leftnav-tab2{
    
    background-position: 0 -135px;
}
.sq-leftnav .ts-leftnav-tab3{
    background-position: 4px -22px;
}
.sq-leftnav .ts-leftnav-tab4{
    background-position: 3px -42px;
}
.sq-leftnav .ts-leftnav-tab5{
    background-position: 3px -87px;
}
.sq-leftnav .ts-leftnav-tab6{
    background-position: 3px -102px;
}
/* 主页面 */
/**
 * @Author:      geekarl
 * @DateTime:    2016-07-15 20:21:27
 * @Description: 底部公共部分的样式
 */
 a{
 	text-decoration: none;
 	font-size: 14px;
 }
 i{
 	font-style: normal;
 }
 .footer{
 	width: 100%;
 	background-color: #fff;
 	height: 160px;
 	overflow: hidden;
 }
 .footer .blink-con{
 	width: 1200px;
 	overflow: hidden;
 	margin: 0 auto;
 	min-width: 1200px;
 }
 .footer .btn-l{
 	float:left;
 	width: 48%;
 }
 .footer .btn-l span{
 	display: block;
 	margin-top:10px;
 	margin-bottom: 5px;
 	font-size: 14px;
 }
 .footer .btn-l .link-cont{
 	text-align: left;
 	margin-top: 5px;
 	width: 100%;
 }
 .footer .btn-l .link-cont a{
 	color: #808080;
 	padding-right: 3px;
 	margin-top: 4px;
 	display: inline-block;
 	font-size: 14px
 }
 .footer .btn-r{
 	float: right;
 	width: 530px;
 	margin-top: 16px;
 }
 .footer .btn-r div{
 	display: inline-block;
 	margin:0 3px;
 }
 .footer .btn-r span{
 	color: #808080;
 	font-size: 12px;
 	display: block;
 	margin: 0 auto;
 	text-align: center;
 }
 .footer .btn-r .connect{
 	float: right;
 	width: 62%;
 	margin-right: 0;
 }
 .footer .btn-r .connect p{
 	line-height: 14px;
 	font-size: 12px;
 	color: #707070;
 	margin-top: 7px;
 	margin-bottom: 7px;
 }
 .bottom{
 	width: 100%;
 	background-color: #fff;
 	height: 100px;
 	border-top: 1px solid #e6e6e6;
 }
.bottom .bot-con{
	width: 400px;
	height: 80px;
	margin:0 auto;
	margin-top: 20px;
	overflow: hidden;
}
.bottom .bot-con span{
	width: 20%;
	text-align: center;
	display: block;
	float: left;
}
.bottom .bot-con span a{
	font-size: 14px;
	color: #4c4c4c;
}
.bottom .bot-foot{
	width: 100%;
	margin: 25px auto;
	text-align: center;
}
.bottom .bot-foot em{
	font-style: normal;
	font-size: 12px;
	color: #999999;
	text-align: center;
	margin:0 10px;
}
</style>